<template>
    <div>
        <div style="float: left; margin-top: 10px; width: 200px;">
            <el-text size="large">id：</el-text>
            <el-input class="input2" v-model="examParm.id" @change="getExamList()" :placeholder="$t('problemView.searchInput')" />
        </div>
            
        <div style="float: left; margin-top: 25px;"><el-text size="large">考试名</el-text></div>
        <el-input class="input" v-model="examParm.examName" @change="getExamList()" :placeholder="$t('problemView.searchInput')"  />
        <div style="float: right; margin-top: 15px;margin-right: 15%;">
            <el-button style="width: 100px;height: 40px;" type="primary" plain  @click="$router.push('/admin/exam/creatExam')">创建测验</el-button>
            <el-button style="width: 100px;height: 40px;" type="success" plain @click="getTypeNumberList(),showCreateByRand=true" >随机组卷</el-button>
        </div>
        
        <div>
            <el-table :data="examList.items">
                <el-table-column prop="id" show-overflow-tooltip label="id" width="100px" />
                <el-table-column prop="examName" show-overflow-tooltip label="测验名" width="200px" />
                <el-table-column prop="beginTime" show-overflow-tooltip label="开始时间" width="200px" />
                <el-table-column prop="validity" show-overflow-tooltip label="时长" width="100px" />
                <el-table-column prop="classBelongName" show-overflow-tooltip label="所属班级" width="100px" />
                <el-table-column prop="updateTime" show-overflow-tooltip label="最后更新时间" width="200px" />
                <el-table-column prop="updateUserName" show-overflow-tooltip label="更新用户名" width="100px" />
                <el-table-column>
                    <template #default="scope">
                        <el-button type="primary" plain @click="$router.push({name: 'creatExam', query: { examId: scope.row.id }})">编辑</el-button>
                        <el-popconfirm title="你确定要删除吗" @confirm="delExam(scope.row.id)">
                            <template #reference>
                                <el-button type="danger" plain>删除</el-button>
                            </template>
                        </el-popconfirm>


                        <el-button type="success" plain @click="$router.push(`/admin/exam/examDate/${scope.row.id}`)">查看数据</el-button>
                    </template>
                </el-table-column>

            </el-table>


        </div>
            

        <div class="pagination"><el-pagination layout="prev, pager, next" :page-size="examParm.pageSize" :current-page="examParm?.pageNo" :total="examList?.counts" @current-change="handlePageChange"/></div>
    </div>



    <el-dialog v-model="showCreateByRand" width="700px" style="margin-top: 40px">
        <div class="container">
        <h1 style="margin-left: 40%;">基本参数</h1>
        <el-form :model="creatRandExamParm" label-width="auto" :rules="rules" ref="ruleFormRef">
            <el-form-item label="考试名" prop="examName">
                <el-input class="input3" v-model="creatRandExamParm.examName" />
            </el-form-item>

            <el-form-item label="开始时间" prop="beginTime">
                <el-date-picker v-model="creatRandExamParm.beginTime" type="datetime" placeholder="Select date and time" />

            </el-form-item>

            <el-form-item label="时长" prop="validity">
                <el-input class="input4" v-model.number="creatRandExamParm.validity" />（分钟）
            </el-form-item>

            <el-form-item label="所属班级">
                全校
            </el-form-item>

            <el-form-item  >
                <el-divider style="width:80%" />
            </el-form-item>

            <el-form-item v-for="(index) in 5"  >
                <div>{{mp[index]}}：<el-input-number v-model="creatRandExamParm.examScoreList[index]" :min="0" :max="100"></el-input-number></div>
                <div style="margin-left: 30px;">{{mp2[index]}}：<el-input-number v-model="creatRandExamParm.examNumberList[index]" :min="0" :max="typeNumberList[index]"></el-input-number></div>
            </el-form-item>
            <el-form-item label="总分：">
                {{totalscore}}
            </el-form-item>
            <el-form-item>
                <el-button type="success" style="margin-left: 200px;" @click="createExamByRandom()">保存</el-button>
            </el-form-item>


        </el-form>
    </div>
    
    </el-dialog>
</template>


<script setup lang="ts">
    import useExamAdmin from '@/hooks/admin/useExamAdmin';
    import { onMounted,ref } from 'vue';
    const {creatRandExamParm,totalscore,examList,examParm,ruleFormRef,rules,typeNumberList,showCreateByRand,createExamByRandom,getTypeNumberList,getExamList,handlePageChange,delExam}=useExamAdmin()
    
    const mp=["","单选分数","填空分数","判断分数","多选分数","大题分数"]
    const mp2=["","单选个数","填空个数","判断个数","多选个数","大题个数"]
    onMounted(()=>{getExamList()})
</script>

<style scoped>
        .input{
            margin-top: 20px;
            margin-left: 10px;
            margin-bottom: 10px;
            width: 20%;
        }

        .input2{
            margin-top: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            width: 70%;
            height: 30px;
        }


        .pagination {
            margin-top: 10px;
            display: flex;  
            justify-content: center;
        }
        .container {
            margin-top: 30px;
            margin-left: 15%;
            height: 650px;

    .input3 {
        width: 400px
    }

    .input4 {
        width: 170px
    }
}

</style>